let hxmConf = {
    pageIDStat: 'mkt_20200305_ztzsgl',
    jiraVersion: {
        url_ver: 'SJCGBS-22135'
    },
    useURL: 'index.html',
    imgPre: hxmConfig.cdn + 'images/des-'
}
let vueParam = null;
let vueObj = null;
let pageIDStat = hxmConf.pageIDStat;
let ext = hxmConf.jiraVersion;

$(()=> {
    vueParam = {
        el: '#app',
        data: {
            questionShow: false,
            tabIndex: 0,
            marginTopRecord: 0,
            floatTabIndex: 0,
            floatTabOpacity: 0,
            floatTabListShow: false,
            floatTabList: ['抓涨停股', '抓连板股', '涨停复盘', '开启提醒'],
            multiple: $('html').css('font-size').replace('px', ''),
            offSetTopArr: [],
            imgSrcIndex: {
                part1: 0,
                part2: 0,
                part4: 0
            },
        },
        watch: {
            'imgSrcIndex.part1': {
                handler(val){
                    if (val < 3) {
                        setTimeout(() => {
                            this.$set(this.imgSrcIndex, 'part1', val+1);
                        }, 2000);
                    } else if (val == 3) {
                        setTimeout(() => {
                            this.$set(this.imgSrcIndex, 'part1', val+1);
                        }, 4000);
                    }
                },
                deep:true
            },
            'imgSrcIndex.part2': {
                handler(val){
                    if (val < 3) {
                        setTimeout(() => {
                            this.$set(this.imgSrcIndex, 'part2', val+1);
                        }, 2000);
                    } else if (val == 3) {
                        setTimeout(() => {
                            this.$set(this.imgSrcIndex, 'part2', val+1);
                        }, 4000);
                    }
                },
                deep:true
            },
            'imgSrcIndex.part4': {
                handler(val){
                    if (val < 3) {
                        setTimeout(() => {
                            this.$set(this.imgSrcIndex, 'part4', val+1);
                        }, 2000);
                    } else if (val == 3) {
                        setTimeout(() => {
                            this.$set(this.imgSrcIndex, 'part4', val+1);
                        }, 3000);
                    }
                },
                deep:true
            },
        },
        computed: {
            imgSrc1() {
                return `${hxmConf.imgPre}Q1-${this.imgSrcIndex.part1}.png`;
            },
            imgSrc2() {
                return `${hxmConf.imgPre}Q2-${this.imgSrcIndex.part2}.png`;
            },
            imgSrc4() {
                return `${hxmConf.imgPre}Q4-${this.imgSrcIndex.part4}.png`;
            }
        },
        mounted() {
            setTimeout(()=> {
                hxmPageStat(pageIDStat, ext);
                this.bottomStat(pageIDStat + ".bottom", ext);
                this.topFloatAnimation();
            }, 0);

            this.$set(this.imgSrcIndex, 'part1', 1);
        },
        methods: {
            rePlay(index) {
                let statArr = ['one', 'two', '', 'four'];
                if (this.imgSrcIndex[`part${index}`] == 4) {
                    this.clickStat(`djcb.${statArr[index-1]}`);
                    this.$set(this.imgSrcIndex, `part${index}`, 1);
                }
            },
            changeTab(index) {
                let statArr = ['zztg', 'zlbg', 'ztfp', 'kqtx'];
                
                if (parseInt(this.offSetTopArr[index]) + 5 !== $(window).scrollTop()) {
                    this.floatTabIndex = index;
                    this.clickStat(statArr[index]);
                    $(window).scrollTop(this.offSetTopArr[index] + 5);
                }
                
            },
            nexPage() {
                hxmJumpPageStat(pageIDStat + ".ljsy", 'pdt_pms_269');
                window.location.href = hxmConf.useURL;
            },
            clickStat(type) {
                hxmClickStat(pageIDStat + '.' + type, ext);
            },
            // 底部悬浮动画+滑动埋点
            topFloatAnimation() {
                this.offSetTopArr = [$('.banner').offset().height, $('.part2').offset().top - (0.35 + 0.84) * this.multiple, $('.part3').offset().top - (0.35 + 0.84) * this.multiple];
                let tabHeight = 0.9 * this.multiple;

                if ($('body').height()-$(window).height() < $('.part4').offset().top - (0.35 + 0.84) * this.multiple) {
                    this.offSetTopArr.push($('body').height()-$(window).height() - 5);
                } else {
                    this.offSetTopArr.push($('.part4').offset().top - (0.35 + 0.84) * this.multiple)
                }

                $(window).on('scroll', ()=> {
                    let scrollTop = $(window).scrollTop();
                    let differ = (scrollTop - (this.offSetTopArr[0] - tabHeight)) / tabHeight;
                    if (differ > 0) {
                        this.floatTabListShow = true;
                        if (differ <= 1) {
                            this.floatTabOpacity = differ.toFixed(2);
                        } else {
                            this.floatTabOpacity = 1;
                        }
                    } else {
                        this.floatTabListShow = false;
                    }

                    if (scrollTop >= this.offSetTopArr[0] && scrollTop < this.offSetTopArr[1]) {
                        this.floatTabIndex = 0;
                    } else if (this.offSetTopArr[1] <= scrollTop && scrollTop < this.offSetTopArr[2]) {
                        this.floatTabIndex = 1;
                    } else if (this.offSetTopArr[2] <= scrollTop && scrollTop < this.offSetTopArr[3]) {
                        this.floatTabIndex = 2;
                    } else if (this.offSetTopArr[3] <= scrollTop) {
                        this.floatTabIndex = 3;
                    }


                    let part2TopC = $('.part2 .content').offset().top;
                    let part4TopC = $('.part4 .content').offset().top;
                    let part5Top = $('.part5').offset().top;
                    let windowH = $(window).height();
                    let bottomFloatH = $('.float').height();

                    if (windowH + scrollTop > part2TopC + bottomFloatH && this.imgSrcIndex.part2 == 0) {
                        this.$set(this.imgSrcIndex, 'part2', 1);
                    }
                    if (windowH + scrollTop > part4TopC + bottomFloatH && this.imgSrcIndex.part4 == 0) {
                        this.$set(this.imgSrcIndex, 'part4', 1);
                    }
                    if (windowH + scrollTop > part5Top + bottomFloatH) {
                        hxmOnceStat(`${pageIDStat}.margin`, ext);
                    }
                });
            },
            // 底部埋点
            bottomStat(stat, extobj) {
                let win_h = document.documentElement.clientHeight || $(window).height();
                let doc_h = document.body.clientHeight || $('body').height();
                let scr_h = document.body.scrollTop || $(window).scrollTop();
            
                let scroll = () => {
                    win_h = document.documentElement.clientHeight || $(window).height();
                    doc_h = document.body.clientHeight || $('body').height();
                    scr_h = document.body.scrollTop || $(window).scrollTop();
            
                    if (win_h + scr_h + 5 >= doc_h && scr_h > 0) {
                        window.removeEventListener('scroll', scroll, false);
                        window.removeEventListener('touchstart', scroll, false);
                        hxmOnceStat(stat, extobj);
                    }
                }
                if (doc_h <= win_h) {
                    window.addEventListener('touchstart', scroll, false);
                } else {
                    window.addEventListener('scroll', scroll, false);
                }
            }
        },
    }
    vueObj = new Vue(vueParam);
    
});